import React from 'react'


import '@/assets/css/order.css'
import { SwiperRef } from 'antd-mobile/es/components/swiper'

const Order = () => {

    const back = () =>{
        React.navigate(-1)
    }

    const swiperRef = React.useRef<SwiperRef>(null)
    const [activeIndex, setActiveIndex] = React.useState(0)
    var [list, SetList] = React.useState([])

    const tabItems = [
        { key: 0, title: '全部' },
        { key: 1, title: '已支付' },
        { key: 2, title: '已入住' },
        { key: 3, title: '已退房' },
        { key: 4, title: '已评价' },
        { key: -1, title: '售后中' },
        { key: -2, title: '退款成功' },
        { key: -3, title: '退款失败' },
    ]

    React.useEffect(() => {
        OrderList(0)
    }, [])

    // 选项卡
    const Change = (key: any) => {
        const index = tabItems.findIndex(item => item.key == key)
        setActiveIndex(index)
        swiperRef.current?.swipeTo(index)
        SetList([])
        OrderList(key)
    }

    // 请求数据
    const OrderList = async (status: any) => {
        var data = {
            status: status,
            busid: React.Business.id
        }

        var result = await React.HTTP.post('/order/list',data)

        if(result.code == 0){
            React.error(result.msg,() => {})
            return false
        }else{
            SetList(result.data)
        }
    }

    const Item = list.map((item: any, key) => {
        return (
            <div className="order_list" key={key}>
                <div className="item">
                    <div className="item_top">
                        <p>{item.room.name}</p>
                        <div className="top_tag">{item.status_text}</div>
                    </div>
                    <div className="house">
                        <div className="item_swipers">
                            <img src={item.room.thumb_text} onClick={() => {React.navigate(`/room/info?rid=${item.room.id}`)}} alt="" />
                        </div>
                        <div className="item_times">
                            <div>
                                <div>{item.start_text}</div>
                                <div>{item.startweek_text} 15:00</div>
                            </div>
                            <div>
                                <div>共{item.day_text}晚</div>
                                <div className="item_right">
                                    <img src="./assets/images/right1.png" alt="" />
                                </div>
                            </div>
                            <div>
                                <div>{item.end_text}</div>
                                <div>{item.endweek_text} 12:00</div>
                            </div>
                            <div>
                                <div className="item_pay">订单总价</div>
                                <div className="item_price">￥{item.price}</div>
                            </div>
                        </div>
                    </div>
                    <div className="item_bar">
                        {item.status == 1 ? 
                        <React.UI.Button color="default" size="mini" onClick={() => {React.navigate(`/order/defund?orderid=${item.id}`)}}>申请退款</React.UI.Button> : item.status == 2 || item.status == 3 ? <><React.UI.Button color="default" size="mini" onClick={() => {React.navigate(`/order/defund?orderid=${item.id}`)}}>申请退款</React.UI.Button><React.UI.Button color="primary" size="mini" onClick={() => 
                        {React.navigate(`/order/comment?orderid=${item.id}`)}} >评价</React.UI.Button> </> : item.status == 4 ? <React.UI.Button color="default" size="mini" onClick={() => {React.navigate(`/order/defund?orderid=${item.id}`)}}>申请退款</React.UI.Button> : ''
                        }
                        <React.UI.Button color="primary" size="mini" onClick={() => {React.navigate(`/order/info?id=${item.id}`)}}>订单详情</React.UI.Button>
                        
                    </div>
                </div>
            </div>
        )
    })
    

    return (
        <>
            <React.UI.NavBar back='返回' onBack={back}>
                房间订单
            </React.UI.NavBar>

            <React.UI.Tabs
                activeKey={tabItems[activeIndex].key}
                onChange={Change}
            >
                {tabItems.map(item => (
                    <React.UI.Tabs.Tab title={item.title} key={item.key} />
                ))}
            </React.UI.Tabs>
                
            <React.UI.Swiper
                direction='horizontal'
                loop
                indicator={() => null}
                ref={swiperRef}
                defaultIndex={activeIndex}
                onIndexChange={(index: any) => {
                    setActiveIndex(index)
                }}
            >
                <React.UI.Swiper.Item>
                    {Item}
                </React.UI.Swiper.Item>
                

            </React.UI.Swiper>

            
        </>
    )
}

export default Order;